<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<!--    <script src="https://unpkg.com/vue/dist/vue.js"></script>-->
    <script src="js/vue.js" type="application/javascript"></script>
    <style type="text/css">
        .cl111111{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    这里是VUE测试页
    <p :id="title|firstUp" @click="details('sdf')" v-html="$options.filters.firstUp(title)"></p>
    <p>{{ message | firstUp}}</p>
    <p>{{ details(123) | firstUp}}</p>
    <a href="logout">{{ msg2 }}</a>
    <button onclick="f()">Button</button><br><br>

    <label for="r1">修改颜色</label>
    <input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'cl111111': use}">
        v-bind:class 指令
    </div>
    <p>计数器:{{counter}}</p>
    <button @click="counter++">加一</button>
    <p>{{showMsg}}</p>
</div>

<script>
    var m = 0, f = 0, c = 0;
    var vm = new Vue({
        el: '#app',
        data: {
            title: "springSecurity",
            message: 'Hello Vue.js!',
            msg2: "退出登录",
            use: false,
            counter: 0,
            showMsg: ""
        },
        methods: {
            details: function(v){
                return this.title + " - 欢迎您" + v + " -m " + (m++)+ " -f " + (f++)+ " -c " + (c++);
            }
        },
        filters: {
            firstUp: function(v){
                (f++);
                if(!v) return "";
                v = v.toString();
                return v.charAt(0).toUpperCase() + v.slice(1);
            }
        },
        computed: {
            site: {
                get: function(){ (c++);return this.title;},
                set: function(v){this.title = v;}
            }
        },
        watch: {//监视器,监视某个字段变化
            counter: function(newValue,oldValue){
                this.showMsg = oldValue + " 变成了 " + newValue;
            }
        }
    })

    function f(){
        vm.title = "新的站点";
        vm.site = "ssssssssss";
    }
</script>
</body>
</html>